@import "variables";

@mixin setTopLine($position: relative, $c: #d3d3d3) {
  position: $position;
  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid $c;
    color: $c;
    transform-origin: 0 0;
    transform: scaleY(0.5);
  }
}

@mixin setBottomLine($position: relative, $c: #d3d3d3) {
  position: $position;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid $c;
    color: $c;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
  }
}

@mixin setDoubleLine($position: relative, $c: #d3d3d3) {
  position: $position;
  &:after, &:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid $c;
    color: $c;
    transform: scaleY(0.5);
  }
  &:after {
    bottom: 0;
    transform-origin: 0 100%;
  }
  &:before {
    top: 0;
    transform-origin: 0 0;
  }
}

@mixin setLeftLine($position: relative, $c: #d3d3d3) {
  position: $position;
  &:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    border-left: 1px solid $c;
    color: $c;
    transform-origin: 0 0;
    transform: scaleX(0.5);
  }
}

@mixin setRightLine($position: relative, $c: #d3d3d3) {
  position: $position;
  &:after {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid $c;
    color: $c;
    transform-origin: 100% 0;
    transform: scaleX(0.5);
  }
}
@mixin setThumbLine($position: relative, $c: #d3d3d3) {
  position: $position;
  &:after {
    position: absolute;
    top: -0.5px;
    left: -0.5px;
    width: 200%;
    height: 200%;
    content: '';
    border: 1px solid $c;
    border-radius: $radius-normal;
    transform: scale(0.5);
    transform-origin: top left;
  }
}


.topBorder {
  @include setTopLine()
}

.bottomBorder {
  @include setBottomLine()
}

.doubleBorder {
  @include setDoubleLine()
}

.thumbBorder {
  @include setThumbLine()
}
